<template>
  <!-- 社群列表组件 -->
  <view
    class="assList"
    :style="{ backgroundColor: props.BGcolor }"
  >
    <!-- 列表切换 -->
    <!-- <view
      class="ass-switch ss-flex ss-row-evenly"
      v-if="switchList.length && !props.is_gc"
    >
      <view
        class="ass-switch-item"
        v-for="(item, ind) in props.switchList"
        :key="item"
        :style="{
          backgroundColor: state.assActiveId == item.id ? theme.btn_background_color : '',
          color: state.assActiveId == item.id ? theme.selected_color : '',
        }"
        @click="listSwitch(item, ind)"
      >
        {{ item[props.keyName] }}
      </view>
    </view> -->
    <!-- 列表 -->
    <scroll-view
      scroll-y="true"
      :style="`height: calc( 100vh - ${props.listHeight}px - ${
        props.switchList.length ? 0 : 0
      }px) `"
      class="scroll-Y"
      @scrolltolower="scrollLower"
    >
      <slot></slot>
    </scroll-view>
  </view>
</template>

<script setup>
const emit = defineEmits(['listSwitch', 'scrollLower']);
import association from '@/association/store';
import { computed, reactive, watch } from 'vue';
import { onShow, onPageScroll, onPullDownRefresh, onLoad } from '@dcloudio/uni-app';
import sheep from '@/sheep';
const state = reactive({
  assActive: 0,
  assActiveId: 0,
  // 是否初始化加载
  onceLoadShow: false
});
const props = defineProps({
  switchList: {
    type: Array,
    default: () => [
      // {name:'全部'},
      // {name:'问答'},
      // {name:'分享'},
      // {name:'日记'},
      // {name:'探店'},
    ],
  },
  is_gc: {
    type: Boolean,
    default: false,
  },
  tabsIndex: {
    type: [String, Number],
    default: 0,
  },
  BGcolor: {
    type: String,
    default: '',
  },
  keyName: {
    type: String,
    default: 'name',
  },
  listHeight: {
    type: [Number, String],
    default: 50,
  },
  // 传二级列表id
  tabsId: {
    type: [String, Number],
    default: 0,
  },
  // 传二级列表id
  tabActive: {
    type: [String, Number],
    default: '',
  },
});
const theme = computed(() => association().theme);
function listSwitch (e, ind) {
  state.assActiveId = e.id;
  emit('listSwitch', {
    index: ind,
    ...e,
  });
}
onShow(() => { });

watch(
  () => props.tabsId,
  (newValue, oldValue) => {
    console.log('执行监听', newValue, props.switchList);

    if (newValue != state.assActiveId && props.switchList.length) {
      const inx = props.switchList.findIndex(item => item.id == newValue)
      listSwitch(props.switchList[inx], inx);
    }
  },
  { deep: true },
);
watch(
  () => props.tabActive,
  (newValue, oldValue) => {
    if (!state.onceLoadShow) {
      state.assActiveId = props.switchList[0].id
      state.onceLoadShow = true
    }
  },
  { deep: true },
);
function scrollLower () {
  console.log('触底');
  emit('scrollLower');
}

// onPageScroll(() => { });
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.assList {
  .ass-switch {
    // background-color: #fff;
    height: 36px;

    .ass-switch-item {
      color: #6c6c6c;
      font-size: 28rpx;
      // width: 73px;
      padding: 0 25rpx;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 30px;

      &-active {
        background-color: #b5f8ff;
        color: #1bbdce;
      }
    }
  }

  .assList-item {
    margin: 25rpx 25rpx 0;
    padding: 25rpx;
    background-color: #fff;
    border-radius: 10rpx;

    & > image {
      height: 176rpx;
      width: 176rpx;
      min-width: 176rpx;
      margin-right: 25rpx;
    }

    & > view {
      height: 176rpx;
      max-height: 176rpx;
      color: #3d3d3d;
    }

    .ass-title {
      font-size: 32rpx;
    }

    .ass-subtitle {
      font-size: 24rpx;
      margin-top: 10rpx;
    }

    .ass-bottom {
      color: #b0b0b0;
      font-size: 24rpx;
    }
  }
}
</style>